<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-04-20 16:10:33
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-03-20 12:04:47
 * @FilePath: /tea-garden-web/src/pages/overview/farmland-detail.vue
 * @Description: 组件-地块详情
-->
<template>
  <section class="component-farmland-detail">
    <div class="content">
      <i
        class="icon-button-back"
        @click="$router.push({ name: 'farmlandSearch'})"
      />
      <section class="farmland-name" v-if="farmlandInfo">
        <span>{{ getDictItemNameById(farmlandInfo.breed) }}</span>
        <span>{{ farmlandInfo.massifNum }}</span>
      </section>
      <div class="detail-farming">
        <section class="name">地块信息</section>
        <el-skeleton animated :loading="loading.farmlandInfo">
          <template #template>
            <section class="farmland-detail-info">
              <el-skeleton-item
                v-for="(item, index) in 6"
                :key="index"
                variant="text"
                class="info"
              />
            </section>
          </template>
          <template #default>
            <section class="farmland-detail-info">
              <section class="info">
                <section class="label">品种</section>
                <section class="value">
                  {{ getDictItemNameById(farmlandInfo.breed) }}
                </section>
              </section>
              <section class="info">
                <section class="label">面积</section>
                <section class="value">
                  {{ farmlandInfo.massifArea + '亩' }}
                </section>
              </section>
              <section class="info">
                <section class="label">长势</section>
                <section class="value">
                  {{ formatValue(farmlandInfo.grow) }}
                </section>
              </section>
              <section class="info">
                <section class="label">土壤水分</section>
                <section class="value">
                  {{ formatValue(farmlandInfo.water) }}
                </section>
              </section>
              <section class="info">
                <section class="label">土壤养分</section>
                <section class="value">
                  {{ formatValue(farmlandInfo.nutrient) }}
                </section>
              </section>
            </section>
          </template>
        </el-skeleton>
        <section class="name">今日农事</section>
        <component-farming-tasks
          :loading="loading.farmlandInfo"
          :height="445"
          :data="farmlandInfo ? farmlandInfo.farming_data : []"
        />
      </div>
    </div>
  </section>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState('base-overview', ['baseInfo', 'farmlandInfo', 'loading', 'currentFarmlandId']),
    ...mapGetters('common', ['getDictItemNameById'])
  },
  watch: {
    currentFarmlandId () {
      this.getFarmlandInfo()
    }
  },
  methods: {
    ...mapActions('base-overview', ['getFarmlandInfo']),
    formatValue (value) {
      return value ? this.getDictItemNameById(value) : '--'
    }
  },
  created () {
    this.getFarmlandInfo()
  }
}
</script>

<style lang="scss">
.component-farmland-detail {
  width: 308px;
  height: 780px;
    margin-top: -45px;
  transform: scale(0.89);
  .content {
    position: relative;
    height: 100%;
    .icon-button-back {
      position: absolute;
      left: 16px;
      top: 18.5px;
      width: 22.5px;
      height: 22.5px;
      background-image: url("/public/image/common/icon-button-back-02.png");
      background-size: cover;
      cursor: pointer;
    }
    .farmland-name {
      position: absolute;
      left: 25%;
      right: 25%;
      top: 17px;
      text-align: center;
      font-size: 18px;
      font-family: PingFang SC-Heavy, PingFang SC;
      font-weight: 800;
      color: #ffffff;
    }
    .detail-farming {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 719px;
      background: #ffffff;
      box-shadow: 1px 0px 4px 1px rgba(0, 0, 0, 0.25);
      border-radius: 15px;
      padding: 25px 15px 16px 20px;
      .name {
        font-size: 16px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #333333;
        margin-bottom: 6px;
      }
      .farmland-detail-info {
        height: 141px;
        background: #ffffff;
        box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        margin-bottom: 25px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .info {
          width: calc(100% / 3);
          height: 50%;
          text-align: center;
          .label {
            font-size: 12px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            margin-top: 13px;
          }
          .value {
            font-size: 14px;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #089bab;
            margin-top: 7px;
          }
        }
      }
    }
  }
}
</style>
